import React, { useEffect } from 'react';
import styles from './index.less';
import { ConnectProps, ConnectState, UserModelState } from '../../models/types'
import { connect } from 'umi'
import Header from './Header'
import MyList from './MyList'
import LogOut from './LogOut'
interface UserProps extends ConnectProps {
  user: UserModelState
}
const User: React.FC<UserProps> = ({ dispatch, user }) => {
  useEffect(() => {
    dispatch({ type: 'user/userDetails' })
    // 不能再这里获取user信息，以上是异步行为
  }, [])
  // 挂载结束后才能获取user信息
  const { name, icon } = user.detail
  const logOutHandle = () => {
    dispatch({ type: 'user/userLogOut' })
  }

  return <div>
    <Header name={name} icon={icon}></Header>
    <MyList></MyList>
    <LogOut logOutHandle={logOutHandle}></LogOut>
  </div>
}
export default connect(({ user }: ConnectState) => ({ user }))(User)